<template>
    <el-dialog title="分配角色" v-model="props.visible" :before-close="beforeClose">
      <el-form :model="form">
        <ul class="input">
          <li>
            <span>角色名称</span><el-input v-model="form.name" placeholder="请输入角色名称" />
          </li>
          <li class="text">
            <span>描述:</span>
            <el-input class="input_btn" v-model="form.description" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
              placeholder="请输入描述" />
          </li>
        </ul>
      </el-form>
      <!--  -->
      <span class="text-span">是否启用:</span>
      <el-radio-group v-model="form.status">
        <el-radio label="1" size="large">是</el-radio>
        <el-radio label="2" size="large">否</el-radio>
      </el-radio-group>
      <!-- 按钮 -->
      <div class="btn">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { defineProps, watch, ref, reactive, withDefaults } from "vue";
  import type { Ref } from "vue";
  import {
    IAdminListItem,
    IRoleListItem,
  } from "../../request/QmsAdminConreillerA/index";
  
  // 父传子
  let props = withDefaults(
    defineProps<{
      visible: boolean;
      form: IAdminListItem;
    }>(),
    {
      visible: true,
    }
  );
  
  // 添加用户表单数据
  const form = ref({}) as Ref<IAdminListItem>;
  const originForm = ref({}) as Ref<IAdminListItem>;
  
  // 监听事件
  watch(
    () => props.form,
    (newVal) => {
      // console.log(newVal);
      form.value = { ...newVal };
      originForm.value = { ...newVal };
    }
  );
  
  // 自定义事件
  const emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirms", row: IAdminListItem): void;
  }>();
  
  let beforeClose = (done: any) => {
    console.log("beforeClose");
    emits("cancel");
  };
  
  // 取消
  let onCancel = () => {
    // 清空 实际上是点击取消的时候，将form恢复成备份的值
    form.value = { ...originForm.value };
    emits("cancel");
  };
  
  // 确定
  let onConfirm = () => {
    console.log(form.value);
    // console.log(row);
    emits("confirms", form.value);
  };
  
  // 关闭对话框
  // const cancel = () => {
  //     form.value = { ...originForm.value }
  //     emits("changeAssign", false);
  // }
  </script>
  
  <style lang="scss" scoped>
  .input {
    .el-input {
      margin-left: 10px;
      width: 100%;
    }
  
    span {
      margin-left: 30px;
      width: 50px;
    }
  
    li {
      margin-top: 20px;
      display: flex;
    }
  
    .text {
      display: flex;
      width: 100%;
  
      .text-input {
        margin-left: 10px;
      }
    }
  
    .input_btn {
      margin-left: 10px;
    }
  }
  
  .el-input {
    width: 400px;
    font-size: 14px;
  }
  
  .btn {
    float: right;
    margin-top: 60px;
  }
  
  .text-span {
    margin-left: 35px;
  }
  
  .el-radio-group {
    padding: 20px;
  }
  
  .input span {
    width: 80px;
  }
  </style>
  